<!-- 文字卡片， 类似于资讯服务 → 票务政策 -->
<template>
  <div  class="span-card">
    <div class="span-card-item" v-for="item in spanCardData" :key="item.id" @click.stop="toSpanCardDetail(item)">
      <div class="title">
        <img :src="test" alt="">
        <h3>{{item.title}}</h3>
      </div>
      <span v-if="item.phone !== undefined" class="iphoneCOde">联系方式：{{item.phone}}</span>
      <p>{{item.content}}</p>
    </div>
  </div>
</template>

<script>
import test from '_as/guli-desc-title-1.png'

export default {
  props: {
    spanCardData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      test
    }
  },
  components: {},
  computed: {},
  created () {},
  mounted () {},
  methods: {
    toSpanCardDetail (item) {
      this.$emit('toSpanCardDetail', item)
    }
  }
}

</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>
.span-card {
  display flex
  justify-content center
  flex-wrap wrap
  cursor default
}
.span-card-item {
  width 550px
  height 140px
  background #F6F6F6
  border-bottom 2px solid #86A6F7
  padding 25px 20px 0
  margin 15px
  .title {
    display flex
    align-items center
    img {
      width 10px
      height 21px
    }
    h3 {
      font-size 16px
      padding-left 4px
    }
  }
  .iphoneCOde {
    text-align left
    display block
    padding-top 15px
    margin-bottom -10px
    font-size 14px
    color red
  }
  p {
    text-align left
    height 70px
    padding-top 20px
    line-height 1.5
    overflow hidden
    text-overflow ellipsis
    white-space: unset
    display -webkit-box
    -webkit-line-clamp 3
    -webkit-box-orient vertical
  }
}
</style>
